<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>表单练习</title>
    <style type="text/css"></style>
  </head>

  <style>
    form {
      background-color: #fc6;
      border-color: gray;
    }

    input select {
      display: block;
      border-color: red;
      width: 5px;
    }
    input select :hover {
      border-color: orange;
    }
    label {
      font-family: 粗体;
    }
  </style>
  
  <body>
    <form action="#" method="get" accept-charset="utf-8">
      <p>
        <label for="userName">用户名：</label>
        <input type="text" name="userName" value="" id="userName" />
      </p>
      <p>
        <label for="password">密&nbsp;&nbsp;码：</label>
        <input type="password" name="password" value="" id="password" />
      </p>
      <p>
        <label>性&nbsp;&nbsp;别：</label>
        <input type="radio" name="gen" value="male" id="male" checked="checked" />
        <img src="images/male.gif" alt="男" />&nbsp;&nbsp;
        <input type="radio" name="gen" value="female" id="female" />
        <img src="images/female.gif" alt="女" />
      </p>
      <p>
        <label>爱&nbsp;&nbsp;好：</label>
        <input type="checkbox" name="hobby" value="sport" id="sport" checked="checked" />
        运动
        <input type="checkbox" name="hobby" value="chat" id="chat" />
        聊天
        <input type="checkbox" name="hobby" value="game" id="game" />
        游戏
      </p>
      <p>
        <label for="profession">职&nbsp;&nbsp;业：</label>
        <select name="profession" id="profession">
          <option value="student" selected="selected">学生</option>
          <option value="teacher">老师</option>
        </select>
      </p>
      <p>
        <input type="submit" name="submit" value="提交" id="submit" />
        <input type="reset" name="reset" value="清空" id="reset" />
      </p>
    </form>
  </body>
</html>
